<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .red{
            background: red;
        }

        .yellow{
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="box">
        {{myname}}
        <button @click="handleClick()">change</button>

        <!-- v-show -->
        <div v-show="isShow===true">动态隐藏和显示</div>

        <!-- v-if -->
        <div v-if="isCreated">动态创建和删除</div>
        
        <!-- v-bind -->
        <div v-bind:class=" isActive?'red':'yellow' ">动态切换背景色</div>

        <!-- v-bind简写 -->
        <div :class=" isActive?'red':'yellow' ">动态切换背景色2</div>
    </div>


    <script>
        new Vue ({
            el:'#box',
            data: {
                myname: '张三',
                isShow:true,
                isCreated:true,
                isActive:true
            }, 
            methods:{
                handleClick(){
                    console.log('handleClick')
                    this.myname = "李四"
                    this.isShow = !this.isShow 
                    this.isCreated = !this.isCreated 
                    this.isActive = !this.isActive
                    
                }
            }
        })
    </script>
</body>
</html>